import DGFooterView from "../components/DGFooterView/DGFooterView.tsx";
import AppProvider from "../sources/AppProvider.ts";
import {useEffect, useState} from "react";
import DGCardView from "../components/DGCardView.tsx";
import DGFadeView from "../components/DGFadeView.tsx";
import DGListView from "../components/DGListView.tsx";
import DGListViewItem from "../components/DGListViewItem.tsx";
import DGConnect from "../sources/DGConnect.ts";
import DGOpenLink from "../components/DGOpenLink.tsx";
import {useNavigate} from "react-router-dom";
// import {Box} from "@mui/material";
// import DGTextView from "../components/DGTextView.tsx";

const DGAbout = () => {
    // 全局上下文
    const App = AppProvider.useAppContext();
    // 路由跳转
    const router = useNavigate();
    // 跳转链接提示面板
    const [link, setLink] = useState({state: false, name: "", link: ""});

    // 关闭面板
    const handleClose = (id: number) => {
        setLink({state: false, name: link.name, link: link.link});
        if (id === 1) router(-1);
    }

    // 设置跳转链接面板
    const handleSetLink = (state: boolean, name: string, link: string) => {
        // 设置链接面板信息
        setLink({state: state, name: name, link: link});
        // 推入历史堆栈
        router("?about");
    }

    useEffect(() => {
        if (App) App.setTitle("关于我们");
    }, [App]);


    // 加载返回和后退识别
    useEffect(() => {
        const handlePopState = () => handleClose(0);
        window.addEventListener('popstate', handlePopState);
        return () => window.removeEventListener('popstate', handlePopState);
    }, []);


    return (<DGFadeView time={1000}>

        <DGOpenLink state={link.state} close={() => handleClose(1)} name={link.name} link={link.link}/>

        {/* 关于我们描述 */}
        <DGCardView title="关于我们" subTitle="逐梦园归于“南乔组织”所管辖。" NoBackground Margin="10px">
            我们专注于“应用业务”和“游戏业务”，致力于为用户提供优质的服务和卓越的体验。
            我们将不断努力，力求为您带来更好的服务和体验。
            我们希望提供的有趣内容和实用资源能为您的生活增添一份便利与快乐。
            如果您有任何建议或意见，欢迎随时告诉我们，我们非常重视每一位用户的反馈。
            感谢您选择逐梦园！祝您生活愉快！
        </DGCardView>

        {/*/!* 加入我们描述 *!/*/}
        {/*<DGCardView title="加入我们" NoBackground Margin="10px" item>*/}
        {/*    <Box style={{padding: "0 15px", flexDirection: "column", gap: "15px"}}>*/}
        {/*        <DGTextView>*/}
        {/*            我们始终欢迎热爱游戏和技术的人才加入我们的团队。*/}
        {/*            如果您对我们提供的服务充满热情，并希望与我们共同创造卓越的用户体验，我们诚邀您申请加入我们。*/}
        {/*        </DGTextView><br/>*/}
        {/*        /!* 相关要求 *!/*/}
        {/*        <DGTextView Bold>我们寻求具有以下特质的候选人：</DGTextView>*/}
        {/*        <DGTextView>*/}
        {/*            1、对游戏行业和最新技术的热情。<br/>*/}
        {/*            2、良好的团队合作能力和沟通技巧。<br/>*/}
        {/*            3、积极主动，具备解决问题的能力。<br/>*/}
        {/*            4、掌握前端技术，主要以React、Vue为主。<br/>*/}
        {/*            5、掌握后端技术，主要以Java、PHP为主。<br/>*/}
        {/*            6、掌握网络技术，用于获取各种api接口。<br/>*/}
        {/*            7、掌握反汇编能力，以Java、C/C++为主。<br/><br/>*/}
        {/*            我们期待与您一起成长，共同打造更精彩的未来！加入我们，一起探索无限的可能性！*/}
        {/*        </DGTextView>*/}
        {/*    </Box>*/}
        {/*</DGCardView>*/}


        {/*/!* 申请加入我们表单按钮 *!/*/}
        {/*<DGListView NoBackground Margin="10px">*/}
        {/*    <DGListViewItem*/}
        {/*        avatar={DGConnect.img("recruit.png")}*/}
        {/*        title="招贤纳士" subText="点击填写加入申请表单"*/}
        {/*        onClick={() => handleSetLink(true, "招贤纳士申请表单", "https://docs.qq.com/form/page/DSkhwdWxDU3NJZ3FR")}/>*/}
        {/*</DGListView>*/}


        {/* 联系方式列表 */}
        <DGListView title="如何联系" NoBackground Margin="10px" gap={20}>
            {/* QQ频道 */}
            <DGListViewItem
                avatar={DGConnect.img("qq_discord.png")}
                title="QQ频道" subText="点击加入QQ频道与我们取得联系"
                onClick={() => handleSetLink(true, "QQ 频道", "https://pd.qq.com/s/5dwqqrvvr")}/>
            {/* 微信公众号 */}
            <DGListViewItem
                avatar={DGConnect.img("wechat_service.png")}
                title="微信公众号" subText="点击加入微信公众号与我们取得联系"
                onClick={() => handleSetLink(true, "微信公众号", "https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkyMTc1OTY4Mg==&scene=124")}/>
            {/* 电子邮件 */}
            <DGListViewItem
                avatar={DGConnect.img("email.png")}
                title="电子邮件" subText="点击发送电子邮件与我们取得联系"
                onClick={() => handleSetLink(true, "发送电子邮件", "mailto:service@zhumengs.com")}/>
        </DGListView>

        {/* 网站底部 */}
        <DGFooterView/>
    </DGFadeView>);
}
export default DGAbout;